<template>
  <div style="background-color: #fff; height: 85vh; position: relative;">
    <div class="head">
      <el-tabs v-model="isDirlis" @tab-click="Info">
        <el-tab-pane label="基本信息" name="first" style="padding: 20px;">
          <div class="mian">
            <el-row class="row" type="flex" style="margin-bottom: 25px;">
              <div>
                <span>员工编号</span>
                <span v-if="isRedact">{{ form.userId }}</span>
                <el-input v-else v-model="form.userId" disabled />
              </div>
              <div>
                <span>司机名称</span>
                <span v-if="isRedact">{{ form.name }}</span>
                <el-input v-else v-model="form.name" disabled />
              </div>
              <div>
                <span>所属机构</span>
                <span v-if="isRedact">{{ agencyName }}</span>
                <el-input v-else v-model="agencyName" disabled />
              </div>
            </el-row>

            <el-row class="row" type="flex">
              <div>
                <span>电话</span>
                <span v-if="isRedact">{{ form.mobile }}</span>
                <el-input v-else v-model="form.mobile" disabled />
              </div>
              <div>
                <span>年龄</span>
                <span v-if="isRedact">{{ form.age }}</span>
                <el-input v-else v-model="form.age" />
              </div>
            </el-row>
          </div>

        </el-tab-pane>
        <el-tab-pane label="驾驶证信息" name="drivingLicence">
          <!--  -->
          <div class="mian">
            <el-row class="row" type="flex" style="margin-bottom: 25px;">
              <div>
                <!--  -->
                <span>驾驶证号:</span>
                <span v-if="isRedact">{{ form.licenseNumber }}</span>
                <el-input v-else v-model="form.licenseNumber" />
              </div>
              <div>
                <!--  -->
                <span>准驾车型:</span>
                <span v-if="isRedact">{{ form.allowableType }}</span>
                <el-input v-else v-model="form.allowableType" />
              </div>
              <div>
                <!--  -->
                <span>初次领证日:</span>
                <span v-if="isRedact">{{ time }}</span>
                <el-date-picker
                  v-else
                  v-model="time"
                  type="date"
                  placeholder="选择日期"
                  value-format="yyyy-MM-dd"
                />
              </div>
            </el-row>

            <el-row class="row" type="flex" style="margin-bottom: 25px;">
              <div>
                <!--  -->
                <span>驾驶证年限:</span>
                <span v-if="isRedact">{{ form.validPeriod }}</span>
                <el-input v-else v-model="form.validPeriod">
                  <template #suffix>年</template>
                </el-input>
              </div>
              <div>
                <!--  -->
                <span>驾龄:</span>
                <span v-if="isRedact">{{ form.driverAge }}</span>
                <el-input v-else v-model="form.driverAge">
                  <template #suffix>年</template>
                </el-input>
              </div>
              <div>
                <!--  -->
                <span>驾驶证类型:</span>
                <span v-if="isRedact">{{ form.licenseType }}</span>
                <el-input v-else v-model="form.licenseType" />
              </div>
            </el-row>

            <el-row class="row" type="flex" style="margin-bottom: 25px;">
              <div>
                <!--  -->
                <span>从业资格证:</span>
                <span v-if="isRedact">{{ form.qualificationCertificate }}</span>
                <el-input v-else v-model="form.qualificationCertificate" />
              </div>
              <div>
                <!--  -->
                <span>入场信息:</span>
                <span v-if="isRedact">{{ form.passCertificate }}</span>
                <el-input v-else v-model="form.passCertificate" />
              </div>
            </el-row>
            <el-row class="row" type="flex">
              <span style="margin-right: 30px;">图片信息:</span>
              <el-row type="flex">
                <img class="img imgShade icon" src="	https://yjy-slwl-oss.oss-cn-hangzhou.aliyuncs.com/f5b1a839-88ab-4af4-aba4-8b23320098a8.png" alt="">
                <img class="img" src="	https://yjy-slwl-oss.oss-cn-hangzhou.aliyuncs.com/50dcaf77-01ae-424c-b4b2-2f5efb96791a.png" alt="">
                <!-- <img v-else-if="imgUrl.length===1" class="img imgShade icon" :src="imgUrl" alt="图片加载失败">
                <img v-else-if="imgUrl.length===2" class="img imgShade icon" :src="imgUrl" alt="图片加载失败"> -->

              </el-row>
              <el-upload
                v-if="!isRedact"
                action=""
                list-type="picture-card"
                :on-change="handlePictureChange"
                :http-request="upload"
                :file-list="fileList"
              >
                <i class="el-icon-upload2" />
              </el-upload>
            </el-row>
          </div>

        </el-tab-pane>
      </el-tabs>
    </div>

    <div class="footer">
      <el-row type="flex" justify="center" class="ftr">
        <div v-if="isRedact">
          <el-button type="primary" style="width: 130px;" @click="isRedact=false">编辑</el-button>
        </div>
        <div v-else>
          <el-button type="primary" style="width: 130px;" @click="onSubmit">保存</el-button>
          <el-button style="width: 130px;" @click="isRedact=true">取消</el-button>
        </div>
      </el-row>
    </div>

  </div>
</template>

<script>
import { getDirverInfo, getCarInfo } from '@/api/driver'

export default {
  name: 'Diver',

  data() {
    return {
      isDirlis: 'first',
      isRedact: true, // 编辑车主
      form: {},
      agencyName: '',
      time: '',
      imgUrl: [],
      fileList: []
    }
  },
  created() {
    this.getInfo()
    // this.getCarInfo()
  },
  methods: {
    async getInfo() {
      const { data } = await getDirverInfo(this.$route.params.id)
      this.form = data
      this.agencyName = data.agency.name
    },
    async getCarInfo() {
      const { data } = await getCarInfo(this.$route.params.id)
      this.form = data
      this.time = data.initialCertificateDate
      const linksArray = data.picture.split(',').map(link => link.trim())
      this.imgUrl = linksArray.map(link => ({ url: link }))
    },
    // 保存
    async onSubmit() {
      this.$message.error('初始文件不能被修改')
    },
    handlePictureChange() {

    },
    async upload(file) {
      const formData = new FormData()
      formData.append('file', file)
    },
    Info() {
      if (this.isDirlis === 'first') {
        this.getInfo()
      } else {
        this.getCarInfo()
      }
    }
  }
}
</script>

<style scoped lang="scss">
span{
  line-height: 40px;
}
.head{
  padding: 30px;
}
.imgShade{
  &:hover{
  position: relative;
  width: 200px;
  height: 100%;
  background-color: rgba($color: #000000, $alpha: .2);

  }

}
.icon{
  &::before{
        content: '\e777';
        position: absolute;
        display: block;
        width: 30px;
        height: 30px;
        z-index: 1000;
    }
}
::v-deep .el-input__suffix{
  line-height: 40px;
  color: #000;
  font-size: 16px;
  margin-right: 10px;
}
::v-deep .is-active{
  font-weight: 700;
  font-size: 20px;
}
::v-deep .el-tabs__item{
  color:#000;
}
::v-deep .el-input{
  width: 60% !important;
}
.row{
  div{
    width: 30%;
    display: flex;
    span{
      &:first-child{
        width: 100px;
      }
    }
  }
}
.ftr{
  position: absolute;
  width: 100%;
  background-color: #fff;
  bottom: 0;
  margin:  20px 0 0;
  padding: 30px 0;
   border-top: 1px solid #e4e7ed;
}
.img{
  width:200px ;
  margin-right: 20px;
}
::v-deep .el-upload{
  width: 200px;
}
</style>
